<template>
	<view class='container'>
		<view class="result-mask"></view>
		<view class="slider-container" :style="{ width: w + 'px' }">
			<view class="slider-canvas" :style="{ width: w + 'px', height: h + 'px' }">
				<!-- 大图 -->
				<canvas :width="w" :height="h" canvas-id="canvas" id="canvas" />
				<!-- 小图 -->
				<canvas class="slider-block" :width="l" :height="smallHeight" canvas-id="block" id="block" />
				<!-- 结果遮罩层 -->
				<view class="btn" @click="refresh"></view>
			</view>
			<!-- 拖动的滑块内容 -->
			<view class="slider-square">
				<view class="box">
					<view class="slider-square-icon" :style="{ left: slideInfo.sliderLeft }" @touchstart="sliderDown"
						@touchmove="sliderMove" @touchend="sliderUp"></view>
					<text>{{ slideInfo.sliderText }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		base64ToPath
	} from 'image-tools'
	export default {
		props: {
			w: {
				type: Number,
				default: 300,
			},
			h: {
				type: Number,
				default: 180,
			},
			l: {
				type: Number,
				default: 40,
			},
			sliderText: {
				type: String,
				default: "拖动滑块向右>>",
			},
			bigImg: {
				type: String,
				default: "",
			},
			smImg: {
				type: String,
				default: "",
			},
			r: {
				type: Number,
				default: 0,
			},
			accuracy: {
				type: Number,
				default: 5,
			},
			posY: {
				type: Number,
				default: 0,
			},
			posX: {
				type: Number,
				default: 0,
			},
			smallHeight: {
				type: Number,
				default: 40,
			}
		},
		data() {
			return {
				block: null,
				blockCtx: null,
				slideInfo: {
					sliderLeft: 0,
					block_x: 0,
					block_y: 0,
					sw: this.l,
					sliderText: this.sliderText,
				},
				origin: {
					orginX: 0,
					originY: 0,
				},
				resultMask: {
					class: "",
					height: 0,
				},
				slider: false,
				smallX: 0,
			};
		},
		mounted() {
			this.initDom();
			this.initImg();
		},
		watch: {
			bigImg(newVal) {
				this.reset();
				this.initImg();
			}
		},
		methods: {
			initDom() {
				this.canvasCtx = uni.createCanvasContext('canvas');
				this.blockCtx = uni.createCanvasContext('block');
			},
			initImg() {
				//大图
				this.locaImage(this.bigImg, (img) => {
					//加载图
					this.canvasCtx.drawImage(img.path, 0, 0, this.w, this.h);
					//绘制
					this.canvasCtx.draw();
				})
				//小图
				this.locaImage(this.smImg, (img) => {
					this.blockCtx.drawImage(img.path, this.smallX, 0, this.l, this.smallHeight);
					this.blockCtx.draw();
				})
			},
			async locaImage(url, callback) {
				let path = await base64ToPath(url)
				uni.getImageInfo({
					src: path,
					success(res) {
						// console.log(11, res)
						callback(res)
					},
					fail(error) {
						// console.log(222, error);
					}
				})
			},
			sliderDown(e) {
				this.slider = true;
				this.slideInfo.sliderText = "";
				this.origin.orginX = e.touches[0].clientX;
			},
			sliderMove(e) {
				if (this.slider) {
					const moveX = e.touches[0].clientX - this.origin.orginX;
					if (moveX < 0 || moveX + this.l > this.w) return false;
					this.slideInfo.sliderLeft = moveX + "px";
					let blockLeft = ((this.w - this.slideInfo.sw) / (this.w - 40)) * moveX;
					this.smallX = blockLeft;
					this.initImg();
				}
			},
			sliderUp(e) {
				if (!this.slider) return false;
				this.slider = false;
				const left = parseInt(this.smallX);
				this.$emit('sliderJudge', left);
			},
			reset() {
				this.slideInfo.sliderLeft = 0;
				this.smallX = 0;
				this.resultMask.class = "";
				this.resultMask.height = 0;
				this.slider = false;
				this.slideInfo.sliderText = this.sliderText;
			},
			refresh() {
				this.$emit('request-event');
			},
		},

	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
	}

	.result-mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #000;
		opacity: .7;
	}

	.slider-container {
		position: fixed;
		background: #fff;
		z-index: 2000;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border: 2px solid #ccc;

		.slider-canvas {
			position: relative;

			.slider-block {
				position: absolute;
				top: 0;
				left: 0;
			}

			.btn {
				position: absolute;
				right: 0;
				top: 0;
				width: 34px;
				height: 34px;
				cursor: pointer;
				background-image: url('/subPackages/login/images/light.png');
				background-position: 34px 35px;
				z-index: 999;
			}

			@keyframes result-show {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 0.7;
				}
			}

			.result-mask {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				opacity: 0.7;

				&.success {
					background-color: #52ccba;
					animation: result-show 1s;
				}

				&.fail {
					background-color: #f57a7a;
					animation: result-show 1s;
				}
			}
		}
	}

	.slider-square {
		background-color: #f7f9fa;
		height: 40px;
		text-align: center;
		line-height: 40px;
		border: 1px solid #ddd;
		position: relative;

		.slider-square-icon {
			position: absolute;
			top: 0;
			left: 0;
			height: 39px;
			width: 39px;
			background-color: #fff;
			box-shadow: blanchedalmond 0px 0px 1px 2px;
			cursor: pointer;

			&:hover {
				background-color: rgb(249, 162, 32);
			}
		}
	}

	canvas {
		width: 100%;
		height: 100%;
	}
</style>